22323
24476 
Eu sou um iniciante absoluto, estudei sozinho por duas semanas, me preparando para um bootcamp que aconteceria em um mês. Em um esforço para melhorar minhas habilidades e "aprender a pensar como um desenvolvedor", assumi um projeto que tenta resolver um problema do mundo real.
Minha esposa dirige uma empresa que exige que ela gere faturas para seus clientes. Estou tentando usar HTML e JavaScript para construir um aplicativo baseado na web que permite a ela criar rapidamente faturas personalizadas em vez de escrevê-las manualmente a cada vez.
Na versão atual, um prompt solicita um número dela. Esse número gera um número igual de linhas de três colunas em HTML. Isso permite que ela personalize a fatura com o número exato de campos de que precisa.
A coluna 1 contém o nome do produto. Na mesma linha, a coluna 2 contém a contagem de unidades, enquanto a coluna 3 contém o custo total desse produto, que é o preço base multiplicado pela contagem de unidades. Quero que esse cálculo ocorra com um clique de botão. Mas, estou preso.
Para fazer a matemática, preciso obter os inteiros de cada linha e coluna e passá-los para uma função. Mas, como cada linha e coluna foram geradas automaticamente, elas não têm atributos exclusivos e não podem ser identificadas. Sou capaz de realizar a matemática em cada coluna, mas não em cada linha.
Como sou tão novo, tendo aprendido apenas com alguns cursos introdutórios do Codecademy e alguns vídeos do YouTube, não sei como avaliar se estou abordando o projeto de forma totalmente errada, ou se há algum truque que estou perdendo, ou se houver apenas algo que ainda não aprendi. Se alguém com alguma experiência pudesse me cutucar na direção certa, eu realmente apreciaria!
Anexei todo o código a este post. Peço desculpas se for uma bagunça horrível. Vá com calma comigo, sou um iniciante!
const invDate = Date ();
var field = " " +
" " +
"  
 
";
document.getElementById ('newInvoice'). onclick = function () {
let invoicedName = prompt ('Para quem esta fatura é feita?', 'Digite um nome');
let productFields = Number (prompt ('Quantos nomes de produtos nesta fatura?', 'Insira um número'));
let fields = ''
let dynHtml = ''
if (invoicedName! = null && productFields! = null) {
para (deixe i = 1; i <= productFields; i ++) {
campos + = campo};
} else {alert ('Por favor, insira entradas válidas.');
};
dynHtml = "
  
 
" +
"
 FATURA 
" +
"
 Preparado para: " + invoicedName + ", em" +
"
" + invDate + "
 
 
" +
campos + "
 
" +
" 
";
document.write (dynHtml);
document.getElementById ('calcular'). onclick = function getQtyFields () {
let qtyInputs = document.getElementsByName ('qty'),
resultQty = 0;
para (deixe j = 0; j
2020-12-15 08:12:32 
Como você disse, seu principal problema é encontrar uma maneira de dar a cada campo de entrada em sua própria linha seu próprio identificador exclusivo. Dessa forma, você pode calcular o preço para cada linha e inseri-lo no campo de preço.
Você primeiro deve começar com os campos:
var field = " " +
" " +
"  
 
";
document.getElementById ('newInvoice'). onclick = function () {
...
para (deixe i = 1; i <= productFields; i ++) {
campos + = campo};
...
};
Cada grupo precisa de seu próprio identificador. Dessa forma, você pode consultar posteriormente cada entrada em cada linha para calcular o preço subtotal. O atributo class é algo que você pode atribuir a vários elementos para se referir a eles mais tarde. Essa classe pode ser qualquer coisa, desde que não entre em conflito com a classe de nenhuma outra linha. Você pode usar o i do loop como seu identificador, pois ele muda a cada loop.
para (deixe i = 1; i <= productFields; i ++) {
var field = " " +
" " +
"  
 
";
campos + = campo
};
Isso adicionará a classe row- {i} a cada campo em cada linha. Melhor ainda, você pode refatorar isso em sua própria função
function generateFields (i) {
return " " +
" " +
"  
 
";
}
para (deixe i = 1; i <= productFields; i ++) {
campos + = gerarCampos (i);
};
Você obtém algo semelhante ao seguinte html
 
 
  
 

 
 
  
 

 
 
  
 

Agora, em sua função de cálculo, você pode consultar essas linhas e calcular seu preço. Aqui você pode fazer um loop nos campos de entrada do 'item'.
document.getElementById ('calcular'). onclick = function getQtyFields () {
let itemInputs = document.getElementsByName ('item')
para (deixe i = 0; i )
para (deixe i = 0; i